<template>
<div class="main-content">
	<div class="screen-frame clearfix">
		<div class="col-md-6 col-lg-4">
			<div class="form-horizontal">
				<div class="form-group">
					<div class="col-md-8 col-sm-10">
						<input type="text" v-model="selfRoleInfo.roleName" class="form-control" placeholder="角色名称">
					</div>
                    <button type="button" @click="searchRoleResource" class="btn btn-default btn-theme">查询</button>
					<button type="button" @click="selfRoleModelShow('A', '')" v-res="{code:'menu_0003_0002_0001'}" class="btn btn-default btn-theme addBtn2">新增</button>
					
				</div>
			</div>
		</div>
	</div>
	<div class="table-responsive report-table">
		<table class="table table-striped table-bordered">
			<thead>
				<tr>
					<th width="20%">序号</th>
					<th width="35%">角色名称</th>
					<th width="35%">创建时间</th>
					<th width="40%">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(row, index) in roleRows" :key="index">
					<td>{{index + 1}}</td>
					<td>{{row.roleName}}</td>
					<td>{{row.createTime}}</td>
					<td>
						<a href="javascript:void(0)"  @click="selfRoleModelShow('U', row.id)" v-res="{code:'menu_0003_0002_0002'}"  class="btnA edit">编辑</a>
						<a href="javascript:void(0)" @click="delRoleResource(row.id)" v-res="{code:'menu_0003_0002_0003'}" class="btnA edit">删除</a>
						<a href="javascript:void(0)" @click="selfRoleAuthModelShow(row.id, row.roleName)" v-res="{code:'menu_0003_0002_0004'}" class="btnA edit">授权</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="laypage_self_role"></div>
	<selfRoleModal v-bind:selfRoleInfo="selfRoleInfo" v-on:selfRoleListener='selfRoleReturn'></selfRoleModal>
	<!--<selfRoleAuthModal v-bind:roleId="roleId"></selfRoleAuthModal>-->
	<selfRolwAuthTemp></selfRolwAuthTemp>
</div>
</template>

<script>
	import selfRoleModal from './selfRoleModal.vue'
	//import selfRoleAuthModal from './selfRoleAuth.vue'
	import selfRolwAuthTemp from './selfRoleAuthTemp.vue'
	
	export default {
		data() {
			return {
				loginInfo: {
					userId: window.localStorage.getItem("1_userId"),
					isLogin: window.localStorage.getItem("1_isLogin")
				},
				roleRows: [],
				selfRoleInfo: {
					roleId: '',
					roleOrigin: '1',
					roleName: '',
					merchantId: '',
					optType: ''
				},
				pageInfo: {
					pageNo: 1,
					pageSize: 10
				},
				roleId: ''
			}
		},
		components: {
			selfRoleModal,
			//selfRoleAuthModal,
            selfRolwAuthTemp
		},
		mounted: function() {
			this.initRoleResource();
		},
		methods: {
			initRoleResource() {
				var _self = this;
				var params = {};
				params["roleName"] = _self.selfRoleInfo.roleName;
				params["roleOrigin"] = _self.selfRoleInfo.roleOrigin;
				params["pageNo"] = _self.pageInfo.pageNo;
				params["pageSize"] = _self.pageInfo.pageSize;
				var body = {};
				body.params = params;
				var url = _self.utilHelper.apiUrl + "/api/getChannelRolePage";
	   	 		_self.$http.post(url, body).then((response) => {
					var resData = response.body.resData;
					var page = resData.channelRoleListPage;
					var total = page.total;
					var totalPages = page.totalPages;
					var pageNo = page.pageNumber;
					var pageSize = page.pageSize;
		   			var result = resData.result;
					if("1" == result){
						var rows = page.rows;
						_self.roleRows = rows;
					}
					//加载分页组件
					if(totalPages > 0) {
						layui.laypage.render({
							elem: $('#laypage_self_role'), //容器。值支持id名、原生dom对象，jquery对象,
							limit:_self.pageInfo.pageSize,
							curr:pageNo,
							count:total,
							theme: '#f87242;', //皮肤
							first: '首页', //若不显示，设置false即可
							last: '尾页', //若不显示，设置false即可
							prev: '上一页', //若不显示，设置false即可
							next: '下一页', //若不显示，设置false即可
							layout:['prev', 'page', 'next','skip','count'],
						    jump: function(obj,first){
						    	if(!first){
						    		_self.pageInfo.pageNo = obj.curr;
						  			_self.initRoleResource();
						    	}
						    }
						});
					}
		  		}, (response) => {
		  		});
			},
			searchRoleResource() {
				this.selfRoleInfo.pageNo = 1;
				this.initRoleResource();
			},
			selfRoleModelShow(optType, id) {
				this.selfRoleInfo.roleId = id;
				this.selfRoleInfo.optType = optType;
				console.log(this.selfRoleInfo);
				$("#selfRoleModal").modal("show");
			},
			selfRoleReturn() {
				this.initRoleResource();
			},
			delRoleResource(id) {
				var _self = this;
				var params = {};
				params["id"] = id;
				layer.confirm('您是否要删除该角色？', {
				  	btn: ['确定删除','再考虑考虑'] //按钮
					}, function(){
						var body = {};
						body.params = params;
					   	var url = _self.utilHelper.apiUrl + "/api/delChannelRole";
			   	 		_self.$http.post(url, body).then((response) => {
								var body = response.body;
					   			var result = body.result;
								var resultMsg = "操作成功!";
								if("0" == result){
									resultMsg = "操作失败!";
								}
				   				//输出操作信息
					   			layer.msg(resultMsg, {
									time: 1000
								}, function(){
									if("1" == result){
										_self.initRoleResource();
									}
								});
					  		}, (response) => {
					  	});
					}, function(){
				});
			},
			selfRoleAuthModelShow(roleId, roleName) {
				this.$store.commit('set_selectRoleInfo', {'roleId': roleId, 'roleName': roleName});
				$("#selfRolwAuthTemp").modal({
					backdrop: 'static',
					keyboard: false,
					show: true
				});
			}
		}
	}
</script>
